<template>
  <div>
    <button type="button" @click="foo">调用子组件方法</button>
    <hr />
    <child01 :names="names" v-if="isLoading" @sendVal="sendVal" ref="child" :aa.sync="text"/>
    <hr />
    <p>{{text}}</p>
  </div>
</template>

<script>
import child01 from './child01'
export default {
  data () {
    return {
      names: [],
      isLoading: false,
      text: '父组件的值'
    }
  },
  methods: {
    getData () {
      setTimeout(() => {
        this.names = ['哈哈', '嘻嘻', '美美']
        this.isLoading = true
      }, 2000)
    },
    sendVal (val) {
      console.log(val)
    },
    foo () {
      console.log('子组件中的数据===>', this.$refs.child)
      this.$refs.child.foo()
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    child01
  }
}
</script>
